<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员游戏中心</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <script src="./assets/js/rem.js"></script>
    <link rel="stylesheet" href="./assets/css/index.css">
</head>

<body>
    <div id="app"></div>
    <div id="toastContainer"></div>
    <template id="popup">
        <div class="popup-container" v-if="show">
            <div class="popup-box">
                <div class="popup-title">{{title}}</div>
                <div class="popup-desc">{{desc}}</div>
                <div class="popup-btn">
                    <button class="btn-confirm btn-click" @click="onConfirm">确定</button>
                </div>
            </div>
        </div>
    </template>
    <template id="btn-start">
        <div class="btn-start-game mt-10 btn-click" @click="$gotoGameAPP(card.playAddr)"><div class="text-start-game">开始游戏</div></div>
    </template>
    <template id="content-gift">
        <div v-show="!card.isGetGift" class="position-re btn-copy btn-click" :data-clipboard-target="`#ID${card.giftCode}${card._index_}`" @click="changeCard">
            <div class="text-gift">领礼包</div>
            <img class="img-gift" src="./assets/image/gift.png" />
        </div>
        <div v-show="card.isGetGift" class="code-box display-flex display-v-center display-h-between">
            <div class="text-code" :id="`ID${card.giftCode}${card._index_}`">{{card.giftCode}}</div>
            <div class="text-blue btn-copy btn-click" :data-clipboard-target="`#ID${card.giftCode}${card._index_}`" @click="$copyText">复制</div>
        </div>
    </template>
    <template id="content-short">
        <div @click="$gotoGameAPP(card.playAddr)" class="flex-row-top btn-click" v-if="card.type === 'a'">
            <div class="img-icon mr-10">
                <img :src="card.iconUrl" alt="" class="img-icon">
            </div>
            <div class="flex-1">
                <div class="game-name">{{card.name}}</div>
                <div class="game-short text-ellipsis">{{card.short}}</div>
                <div class="game-color-bar text-ellipsis">{{card.surprise}}</div>
            </div>
        </div>
        <div @click="$gotoGameAPP(card.playAddr)" class="display-flex display-flex-col w-full p-h-8  btn-click" v-else-if="card.type === 'b'">
            <div class="display-flex">
                <div class="img-icon-small mr-10">
                    <img :src="card.iconUrl" alt="" class="img-icon-small">
                </div>
                <div class="game-name">{{card.name}}</div>
            </div>
            <template v-if="!card.isGetGift">
                <div class="game-short text-ellipsis-2-line mt-5 w-full overflow-h pr-20">{{card.short}}</div>
                <div class="game-color-bar text-ellipsis mt-10">{{card.surprise}}</div>
            </template>
            <template v-else>
                <div
                    :class="['text-a-gift', 'mt-10', 'mb-10', 'text-ellipsis-3-line', 'ele-min-h-72', card.type === 'b' ? 'font-color-black' : '']"
                >{{card.giftPos}}</div>
            </template>
        </div>
        <div @click="$gotoGameAPP(card.playAddr)" class="display-flex display-flex-col w-half display-v-end  btn-click" v-else-if="card.type === 'c'">
            <div class="display-flex">
                <div class="img-icon-small mr-10">
                    <img :src="card.iconUrl" alt="" class="img-icon-small">
                </div>
                <div class="game-name">{{card.name}}</div>
            </div>
            <template v-if="!card.isGetGift">
                <div class="game-short text-ellipsis-2-line mt-5 w-full overflow-h text-indent">{{card.short}}</div>
                <div class="game-color-bar text-ellipsis mt-10">{{card.surprise}}</div>
            </template>
            <template v-else>
                <div :class="['text-a-gift', 'mt-10', 'mb-10', 'text-indent', 'text-ellipsis-3-line', card.type === 'c' ? 'font-color-black' : '']">{{card.giftPos}}</div>
            </template>
        </div>
    </template>
    <template id="card-a">
        <div class="mb-10 w-full bg-white">
            <div class="position-re ele-h-197">
                <img :src="card.bgUrl" alt="" class="img-full ele-h-197">
                <div class="ab-content display-flex display-flex-col display-v-end">
                    <GiftContent :card="card"></GiftContent>
                    <div class="text-a-gift mt-5 text-align-justify">{{card.giftPos}}</div>
                </div>
            </div>
            <div class="flex-row-top mt-10 p-h-8 pb-10">
                <ShortContent class="flex-1" :card="card"></ShortContent>
                <StartGameBtn :card="card"></StartGameBtn>
            </div>
        </div>
    </template>
    <template id="card-b">
        <div class="mb-10 w-half overflow-h ele-h-279 bg-white">
            <div class="position-re ele-h-127">
                <img :src="card.bgUrl" alt="" class="img-full ele-h-127">
                <div class="ab-content display-flex display-flex-col display-v-end">
                    <GiftContent :card="card"></GiftContent>
                </div>
            </div>
            <div class="display-flex display-flex-col display-v-center mt-10">
                <ShortContent class="flex-1" :card="card"></ShortContent>
                <StartGameBtn :card="card"></StartGameBtn>
            </div>
        </div>
    </template>
    <template id="card-c">
        <div class="mb-10 w-full display-flex display-h-between ele-h-176 c-container overflow-h bg-white">
            <div class="position-re w-half ele-h-176 overflow-h">
                <div class="ele-cycle-right overflow-h">
                    <div class="position-re">
                        <img :src="card.bgUrl" alt="" class="img-full-c ele-h-176">
                        <div class="ab-content display-flex display-flex-col display-v-end pr-20 pb-5">
                            <GiftContent :card="card"></GiftContent>
                        </div>
                    </div>
                </div>
            </div>
            <div class="display-flex display-flex-col display-v-center w-half mt-10 pr-10 pb-10">
                <ShortContent class="flex-1 w-full mt-10" :card="card"></ShortContent>
                <StartGameBtn :card="card"></StartGameBtn>
            </div>
        </div>
    </template>
    <template id="my-app">
        <div class="container">
            <div class="display-flex mb-16">
                <img class="img-top-game" src="./assets/image/game-handle.png" alt="">
                <div class="home-title ml-10">会员游戏中心</div>
            </div>
            <div class="banner-box mb-10">
                <img class="img-banner" src="./assets/image/banner_1.jpg" alt="" @click="onTakeGift">
            </div>
            <div class="display-flex display-flex-wrap display-h-between">
                <template v-for="(card, index) in cardDataList" >
                    <CardA v-if="card.type === 'a'" :card="card" :key="card.name"></CardA>
                    <CardB v-if="card.type === 'b'" :card="card" :key="card.name"></CardB>
                    <CardC v-if="card.type === 'c'" :card="card" :key="card.name"></CardC>
                </template>
            </div>
            <Popup/>
        </div>
    </template>
    <script src="./assets/js/modules/vue.global.prod.min.js"></script>
    <script src="./assets/js/modules/mitt.umd.js"></script>
    <script src="./assets/js/modules/clipboard.min.js"></script>
    <script src="./assets/js/event.js"></script>
    <script src="./assets/js/xhr.js"></script>
    <script src="./assets/js/index.js"></script>
</body>

</html>